<template>
  <div>
    <el-table
        :data="tableData"
        style="width: 100%">
      <el-table-column
          prop="cropsId"
          label="货物编号">
      </el-table-column>
      <el-table-column
          prop="farmerNickName"
          label="通知人">
      </el-table-column>
      <el-table-column
          prop="farmerDept"
          label="部门">
      </el-table-column>
      <el-table-column
          prop="time"
          label="时间">
      </el-table-column>
      <el-table-column
          prop="remarks"
          label="备注">
      </el-table-column>
      <el-table-column
          prop="status"
          label="状态">
        <template v-slot="scope">
          <el-tag v-if="scope.row.status==0">未运输</el-tag>
          <el-tag v-if="scope.row.status==1">运输中</el-tag>
          <el-tag v-if="scope.row.status==2">已运输</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
              size="mini"
              @click="delivery(scope.row)" v-if="scope.row.status==0">开始配送</el-button>
          <el-button
              size="mini"
              type="danger"
              @click="midCourse(scope.row)" v-if="scope.row.status==1">中途定位</el-button>
          <el-button
              size="mini"
              type="danger"
              @click="delivery(scope.row)" v-if="scope.row.status==1">配送完毕</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: "DriverView",
  data(){
   return{
     tableData:[]
   }
  },
  created(){
    this.load();
  },
  methods:{
    load(){
      this.axios.post("/driver/driver/list?driverId=chenliang").then(res=>{
        this.tableData = res.data.data;
      })
    },
    delivery(row){
      if(row.status == 0){
        this.$confirm('是否开始运送货物', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.axios.post("/driver/driver/delivery?id=" + row.id).then(()=>{
            this.$message.success("开始运送");
            this.$message.success("数据上链成功");
            this.load();
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消运送'
          });
        });
      }else{
        this.$confirm('是否确认配送完毕', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.axios.post("/driver/driver/delivery?id=" + row.id).then(()=>{
            this.$message.success("配送成功");
            this.$message.success("数据上链成功");
            this.load();
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          });
        });
      }
    },
    midCourse(row) {
      this.$confirm('定位', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '数据上链成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消定位'
        });
      });
    }
  }
}
</script>

<style scoped>

</style>